<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <a href="#popover" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
      <h1 class="mui-title">xx仓库</h1>
    </header>
    <div class="mui-content">
      <div id='list' class="mui-group-list">
        <div class="mui-group-list-search mui-input-row mui-search">
          <input type="search" class="mui-input-clear mui-input-speech" placeholder="搜索产品">
        </div>
        <ul class="mui-table-view">
          <li v-repeat="item:list" class="mui-table-view-cell mui-media">
            <partial name="item"></partial>
          </li>
        </ul>
      </div>
    </div>
    <div id="popover" class="mui-popover">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="#">选择仓库</a>
        </li>
        <li class="mui-table-view-cell"><a href="#">设置默认仓库</a>
        </li>
        <li class="mui-table-view-cell" v-on="tap:setWarningQty">设置库存警告值</li>
      </ul>
    </div>
    <script type="text/x-template" id="item-template">
      <a v-on="tap:goTo({url:'./stock_detail.html',id:'stock_detail',waiting: {autoShow: true}},item)">
        <img class="mui-media-object mui-pull-left" src="../../images/shuijiao.jpg">
        <div class="mui-media-body">
          <span v-class="mui-btn-warning:item.qty_compute<warningQty,mui-btn-green:item.qty_compute>10">{{item.product.name}}</span>
          <p>在手：{{item.qty_onhand}} ，预估值：{{item.qty_compute}}</p>
          <p>待出库：{{item.qty_out}}，待入库：{{item.qty_in}}</p>
        </div>
      </a>
    </script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../app/app.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../app/vue-html5.js"></script>
    <script src="../../js/lodash.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue, vm) {
        window.vm = vm = new Vue.PageVm({
          el: 'body',
          name: 'page product_stock_list',
          model: 'ProductsStocks',
          muiInitOption: {
            swipeBack: true //启用右滑关闭功能
          },
          data: function() {
            return {
              warningQty: localStorage['settings:stock:warningQty'] || 0,
            };
          },
          partials: {
            item: '#item-template',
          },
          created: function() {
            this.loadList();
          },
          methods: {
            setWarningQty: function() {
              $.plusReady(function() {
                plus.nativeUI.prompt("请输入库存警报数量", function(e) {
                  if (e.index == 0) {
                    vm.warningQty = parseInt(e.value);
                    localStorage['settings:stock:warningQty'] = vm.warningQty
                  }
                }, "设置库存警报", "数量", ['确定', '取消']);
              })
            },
          },
          mixins: [Vue.mixins.ajax, Vue.mixins.list]
        });
      })(mui, window, document, Vue, window.vm = {});
    </script>
  </body>

</html>